import React, { Component, useEffect, useRef } from 'react'
import { Button } from 'antd'
import { Form, Field, useForm } from '../../components/My-rc-field-form'
import Input from '../../components/My-rc-field-form/Input'
const FormItem = Form.Field

const nameRules = { required: true, message: '请输⼊姓名！' }
const passworRules = { required: true, message: '请输⼊密码！' }

function AntdFormPage(props: any) {
  const formRef = useRef<IUseForm | null>(null)
  const [form] = Form.useForm()

  const onFinish = (val: any) => {
    console.log('onFinish', val) //sy-log
  }
  const onFinishFailed = (val: any) => {
    console.log('onFinishFailed', val) //sy-log
  }
  const onReset = () => {
    form.resetFields()
  }

  useEffect(() => {
    form.setFieldsValue({ name: 'default' })
    if (formRef.current) {
      console.log(formRef.current)
    }
  }, [])
  return (
    <Form
      ref={formRef}
      form={form}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      onReset={onReset}
    >
      <FormItem label="姓名" name="name" rules={[nameRules]}>
        <Input placeholder="name input placeholder" />
      </FormItem>
      <FormItem label="密码" name="password" rules={[passworRules]}>
        <Input placeholder="password input placeholder" />
      </FormItem>
      <FormItem>
        <Button type="primary" size="large" htmlType="submit">
          Submit
        </Button>
      </FormItem>
      <FormItem>
        <Button type="default" size="large" htmlType="reset">
          Reset
        </Button>
      </FormItem>
    </Form>
  )
}
export default AntdFormPage

// export default class MyRCFieldForm extends Component {
//   formRef = React.createRef()
//   componentDidMount() {
//     console.log('form', this.formRef.current) //sy-log
//     this.formRef.current.setFieldsValue({ username: 'default' })
//   }
//   onFinish = (val) => {
//     console.log('onFinish', val) //sy-log
//   }
//   // 表单校验失败执⾏
//   onFinishFailed = (val) => {
//     console.log('onFinishFailed', val) //sy-log
//   }
//   render() {
//     return (
//       <div>
//         <h3>MyRCFieldForm</h3>
//         <Form
//           ref={this.formRef}
//           onFinish={this.onFinish}
//           onFinishFailed={this.onFinishFailed}
//         >
//           <Field name="username" rules={[nameRules]}>
//             <Input placeholder="Username" />
//           </Field>
//           <Field name="password" rules={[passworRules]}>
//             <Input placeholder="Password" />
//           </Field>
//           <button>Submit</button>
//         </Form>
//       </div>
//     )
//   }
// }
